<template>
	<view class="page-content">
		<luBarTabNav :isShowTabbar="isShowTabbar" :tabList="tabList" :barFixed="barFixed" :iconShow="iconShow"
		 :transitionShow="transitionShow" :barHeight="barHeight" :barTop="barTop" :barId="barId" ref="barTabNav">
			<!-- 项目 -->
			<view id="item1" class="tabbody">
				<view class="project-detail-project">
					<view style="background-color: #FFFFFF;">
						<image class="project-detail-project-img" :src="detailInfo.imgAddrs" mode="widthFix"></image>
					</view>
					<view class="project-detail-project-contain">
						<view class="project-detail-project-title">
							{{detailInfo.activitiesTopic}}
						</view>
						<view class="pr-ty-cc">
							{{'#'+detailInfo.activitiesTypeName+' '+'#'+detailInfo.activitiesIndustryName}}
						</view>
						<view class="project-detail-project-want" v-if="detailInfo.isReg===1">
							{{formatPrice(detailInfo)}}
							<!-- {{detailInfo.isFee===0?"免费":'¥'+detailInfo.regFee}} -->
							<!-- {{detailInfo.yourWant && detailInfo.yourWant.join('、')}} -->
						</view>
						<view class="project-detail-project-condetail">
							<view class="project-detail-project-condetail-belong-loc">
								<text style="vertical-align: middle;">{{detailInfo.startTime+'-'+detailInfo.endTime}}</text>
							</view>
						</view>
						<view class="project-detail-project-condetail">
							<view class="project-detail-project-condetail-belong-loc">
								<!-- <image style="width: 20upx;height: 25upx;margin-right:21upx;vertical-align: middle;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/p-loca.jpg" mode=""></image> -->
								<text style="vertical-align: middle;">{{detailInfo.provinceName+detailInfo.cityName+' '+detailInfo.address}}</text>
							</view>
						</view>
					</view>
					<view class="self-divider">

					</view>
					<view class="project-detail-project-condetail-belong">
						<view class="project-detail-project-condetail-belong-title">
							主办方
						</view>
						<view class="project-detail-project-condetail-belong-com">
							<image style="width: 30upx;height: 30upx;margin-right:11upx;vertical-align: middle;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/homecompany.jpg"
							 mode=""></image>
							<text style="vertical-align: middle;">{{detailInfo.organizers}}</text>
						</view>
						<view style="margin-top: 30upx;" class="project-detail-project-condetail-belong-title">
							协办方
						</view>
						<view class="project-detail-project-condetail-belong-com-no">
							<image style="width: 30upx;height: 30upx;margin-right:11upx;vertical-align: middle;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/homecompany.jpg"
							 mode=""></image>
							<text style="vertical-align: middle;">{{detailInfo.coOrganizers}}</text>
						</view>
					</view>
					<view class="self-divider"></view>
				</view>
			</view>
			<view>
				<view class="project-detail-detail-contain">
					<view class="project-detail-detail-contain-title">
						活动详情
					</view>
					<view class="project-detail-detail-contain-detail">
						<view v-html="detailInfo.detail" class=""></view>
					</view>
				</view>
				<view class="self-divider">

				</view>
			</view>
			<view id="item2" class="tabbody" v-if="isLine">
				<view class="project-detail-detail-contain">
					<view class="project-detail-detail-contain-title">
						评论({{commentData.total?commentData.total:'0'}})
					</view>
					<commentTpl ref='commentTpl' :list='commentData.list' :baseUrl='constUrl' :pid='id' :type="'activity'" :isLastPage='commentData.isLastPage'
					 @commentOne='insertLevelOneComment' @commentTwo='insertLevelTwoComment' :hasLogin='hasLogin' @getMore='getComment'
					 @report='insertReport' @del='delectLevelTwoCommentById' @toThumb='increaseThumb'></commentTpl>
				</view>

			</view>
			<view id="item3" class="tabbody">
				<view class="project-detail-recommend">
					<view class="project-detail-recommend-head">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/pro_for_you.png" mode="heightFix"></image>
					</view>
					<view class="project-detail-recommend-contain">
						<ActivityItem ref='ActivityItem' :activityList="searchRecommendProjectList"></ActivityItem>
					</view>
				</view>
			</view>
			<view class="sysBottomShow" style="background: #f5f6f9;">
				我是有底线的
			</view>
			<view :style="{'height':bottomHeight}">

			</view>
			<view class="project-detail-option" :style="{'height':bottomHeight}">
				<view class="project-detail-option-contain">
					<view class="l">
						<view @click="collectProject" class="project-detail-option-sc">
							<view class="project-detail-option-top">
								<image class="project-detail-option-top" :src="isCollect?'https://www.innovationgloble.com/wxs/img/wx/gkxcx/sc.jpg':'https://www.innovationgloble.com/wxs/img/wx/gkxcx/wsc.jpg'"
								 mode=""></image>
							</view>
							<view class="project-detail-option-text">
								{{isCollect?'已收藏':'收藏'}}
							</view>
						</view>
						<view class="project-detail-option-sc">
							<button open-type="share" @ShareAppMessage="onShareAppMessage(detailInfo.id) ">
								<view class="project-detail-option-text project-detail-option-top">
									<button open-type="share" @ShareAppMessage="onShareAppMessage(detailInfo.id) ">
										<image class="project-detail-option-top" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/p-share.jpg" mode=""></image>
									</button>

								</view>
								<view class="project-detail-option-text">
									分享
								</view>
							</button>

						</view>
						<view class="project-detail-option-sc" v-if="parseInt(detailInfo.isReg)===1||parseInt(detailInfo.status)===6">
							<view class="project-detail-option-top" v-if="isLine" @click="commentSub">
								<image class="project-detail-option-top" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/p-edit.jpg" mode=""></image>
							</view>
							<view class="project-detail-option-text" v-if="isLine"  @click="commentSub">
								评论
							</view>
						</view>
					</view>

					<view class="project-detail-option-btn" v-if="parseInt(detailInfo.isReg)===1">
						<view v-if="parseInt(detailInfo.stock)===0" class="project-detail-option-btn-1">报名已满</view>
						<view v-else-if="parseInt(detailInfo.status)===1" @click="toAcOrder" class="project-detail-option-btn-2">立即报名</view>
						<view v-else-if="parseInt(detailInfo.status)===4||5" class="project-detail-option-btn-3">报名结束</view>
						<view v-else-if="parseInt(detailInfo.status)===6" class="project-detail-option-btn-3">活动结束</view>
					</view>
					<view class="project-detail-option-btn button-bottom" @click="commentSub"  v-if="parseInt(detailInfo.isReg)===0&&parseInt(detailInfo.status)!==6">
						发表您的评论吧
					</view>
					<view class="project-detail-option-btn" v-if="parseInt(detailInfo.isReg)===0&&parseInt(detailInfo.status)===6">
						<view class="project-detail-option-btn-3">活动结束</view>
					</view>
				</view>
			</view>
		</luBarTabNav>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
	import ActivityItem from '@/components/page-componnet/activity-item.vue'
	import commentTpl from '@/components/comment-tpl/comment-tpl.vue'
	import commonDetailTitle from '@/components/common-detail-title/common-detail-title.vue'
	import moment from 'moment';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	import msgInput from '@/components/msg-input.vue';
	export default {
		components: {
			luBarTabNav,
			ActivityItem,
			commentTpl,
			commonDetailTitle,
			msgInput
		},
		data() {
			return {
				constUrl: this.$baseUrl,
				isShowTabbar: false,
				isCollect: false,
				collectInfo: {},
				searchRecommendProjectList: [],
				detailInfo: {},
				barFixed: true,
				barHeight: "44",
				barTop: 0,
				iconShow: true,
				barId: "0",
				tabList: [{
					text: "详情",
					navTarget: "#item1",
					iconClass: "icon02",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "评论",
					navTarget: "#item2",
					iconClass: "icon03",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "推荐",
					navTarget: "#item3",
					iconClass: "icon04",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}],
				commentParams: {
					pageNumber: 1,
					projectId: '',
					type: 'activity',
					pageSize: 5
				},
				commentData: {
					list: []
				},
				id: '',
				bottomHeight: '110rpx',

			};
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo','isLine']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			onShareAppMessage(id) {
				return {
					title: this.detailInfo.activitiesTopic,
					path: '/pages/activity-detail/activity-detail?scene=' + this.detailInfo.id, //页面路径及参数
					imageUrl: this.detailInfo.imgAddrs, //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存
				}
			},
			//获取优选推荐的数据
			getRecommendList() {
				let {
					activitiesType,
					activitiesIndustry,
					keyWord,
					id
				} = this.detailInfo;
				keyWord ? null : keyWord = '';
				this.$request.get({
					url: 'recommend/activities',
					data: {
						activitiesType: activitiesType,
						activitiesIndustry: activitiesIndustry,
						keyWord: keyWord,
						removeId: id
					},
				}).then(res => {
					console.log('活动类型', res)
					this.searchRecommendProjectList = res;
				});
			},
			//获取项目详情
			getDetail(id) {
				this.$request.get({
					url: 'innovationActivities/showById',
					data: {
						id: id
					},
				}).then(res => {
					this.detailInfo = res;
					let prjDetail = res.activitiesContent;
					if (prjDetail) {
						let individual = prjDetail.replace(/height: ;width:/, '');
						individual = individual.replace(/height=/, '');
						individual = individual.replace(/width=/, '');
						// this.expertDetail.individual = individual;
						individual = individual.replace(/src=\"/g, 'style="width:100%;object-fit:cover;" src="' + this.constUrl);
						this.detailInfo.detail = individual.replace(/style=\"/g, 'style="width:100%;object-fit:cover;');
						console.log(this.detailInfo.detail)
					}
					uni.setNavigationBarTitle({
						title: res.activitiesTopic
					});
					this.getRecommendList();
				});
			},
			//查看是否收藏
			//获取是否收藏信息
			getCollectInfo() {
				if (!this.hasLogin) {
					this.isCollect = false;
					return false
				}
				this.$request.get({
					url: 'userCollection/queryOne',
					data: {
						mainId: this.activeId,
						type: 3
					},
				}).then(res => {
					if (res) {
						this.isCollect = true;
						this.collectInfo = res;
					} else {
						this.isCollect = false
					}
				});
			},
			//收藏取消事件
			collectProject() {
				let userInfo = uni.getStorageSync('userInfo');
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if (JSON.stringify(userInfo) == "{}") {
					return false
				}
				//如果已收藏，取消收藏
				if (this.isCollect) {
					this.$request.get({
						url: 'userCollection/delete',
						data: {
							id: this.collectInfo.id
						},
					}).then(res => {
						this.isCollect = false;
						this.collectInfo = {};
					});
				} else {
					this.$request.get({
						url: 'userCollection/add',
						data: {
							mainId: this.detailInfo.id,
							type: 3
						},
					}).then(res => {
						this.isCollect = true;
						this.collectInfo = res;
					});
				}
			},
			formatPrice(item) {
				if (JSON.stringify(item) === "{}") {
					return false
				}
				if (item.isFee === 0) {
					return "免费"
				} else {
					let fee = item.regFee.toFixed(2)
					return '¥' + fee
				}
			},
			toAcOrder() {	
				let userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if(!permissionJudge('web:activities:singUp')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				let obj = {
					imgAddrs: '',
					activitiesTopic: '',
					startTime: '',
					endTime: '',
					provinceName: '',
					cityName: '',
					regNumber: '',
					isFee: '',
					regFee: '',
					id: ''
				};
				for (let key in obj) {
					obj[key] = this.detailInfo[key]
				}
				let json = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pagesA/act-order/act-order?param=${json}`
				})
			},
			//获取评论信息
			getComment() {
				this.commentParams.projectId = this.activeId
				this.$request.get({
					url: 'LevelOneComment/selectLevelOneComment',
					data: this.commentParams
				}).then(res => {
					for (let k of res.list) {
						k.createTime = this.isToday(k.createTime);

						for (let kk of k.levelTwoComments) {
							kk.createTime = this.isToday(kk.createTime);
						}
					}
					res.list = [...this.commentData.list, ...res.list]
					this.commentData = res
					this.commentParams.pageNumber += 1;
				})
			},
			//评论日期处理
			isToday(time) {
				if (new Date() - new Date(time) < 86400000) {
					return moment(time).format('HH:mm')
				} else {
					return moment(time).format('MM/DD HH:mm')
				}
			},
			//一级评论
			insertLevelOneComment(v) {
				this.$request.post({
					url: 'LevelOneComment/insertLevelOneComment',
					data: {
						linkProjectId: this.activeId,
						commentContent: v,
						type: 'activity'
					}
				}).then(res => {
					res.linkUserAccountHead = this.userInfo.accountHead;
					res.linkUserName = this.userInfo.realName;
					res.vipLevelIcon = this.userInfo.vipLevelIcon;
					res.vipLevel = this.userInfo.vipLevel;
					res.tags.count = 0;
					res.createTime = moment(new Date().getTime()).format('HH:mm');
					this.commentData.list = [...[res], ...this.commentData.list]
				})
			},
			//二级评论
			insertLevelTwoComment(v) {
				console.log(v)
				this.$request.post({
					url: 'LevelTwoComment/insertLevelTwoComment',
					data: {
						linkCommentId: v.data.levelOneCommentId ? v.data.levelOneCommentId : v.data.linkCommentId,
						whoCommentId: v.data.linkUserId,
						linkTwoCommentId: v.data.levelTwoCommentId,
						hisName: v.data.linkUserName ? v.data.linkUserName : v.data.myName,
						commentContent: v.content,
						type: 'activity'
					}
				}).then(res => {
					res.myHead = this.userInfo.accountHead;
					res.myName = this.userInfo.realName;
					res.vipLevelIcon = this.userInfo.vipLevelIcon;
					res.vipLevel = this.userInfo.vipLevel;
					res.tags.count = 0;
					res.createTime = moment(new Date().getTime()).format('HH:mm');
					const temp = this.commentData.list.find((item) => item.levelOneCommentId === res.linkCommentId);
					if (!temp.levelTwoComments || temp.levelTwoComments.length === 0) {
						temp.levelTwoComments = [];
					}
					temp.levelTwoComments = [...temp.levelTwoComments, ...[res]]
				})
			},
			//举报
			insertReport(v) {
				this.$request.post({
					url: 'Report/insertReport',
					data: {
						linkCommentId: v.data.levelOneCommentId ? v.data.levelOneCommentId : v.data.levelTwoCommentId,
						rank: v.data.levelOneCommentId ? 1 : 2,
						reportContent: v.content,
						type: 'activity',
					}
				}).then(res => {
					uni.showToast({
						title: '举报成功',
					})
					this.$refs.commentTpl.closePuptTip()
				})
			},

			//删除评论
			delectLevelTwoCommentById(v) {
				console.log(v)
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除当前评论吗?',
					success: function(res) {
						if (res.confirm) {
							let temp = {}
							let url = 'LevelOneComment/delectLevelOneCommentByid'
							if (v.levelOneCommentId) {
								temp.levelOneCommentId = v.levelOneCommentId
								url = 'LevelOneComment/delectLevelOneCommentByid'
							} else {
								temp.LevelTwoCommentId = v.levelTwoCommentId
								url = 'LevelTwoComment/delectLevelTwoCommentById'
							}

							that.$request.get({
								url: url,
								data: temp
							}).then(res => {
								let data = {}
								if (v.levelOneCommentId) {
									data = that.commentData.list.find((item) => item.levelOneCommentId === v.levelOneCommentId);
								} else {
									data = that.commentData.list.find((item) => item.levelOneCommentId === v.LevelTwoCommentId);
								}

								that.commentData.list.splice(data, 1);
								uni.showToast({
									title: '删除成功',
								})
							})

							that.$refs.commentTpl.closePup()
						} else if (res.cancel) {
							that.$refs.commentTpl.closePup()
						}
					}
				});

			},
			// 点赞
			increaseThumb(v) {
				if (v.tags.flag == 1) {
					this.$request.post({
						url: '/Tags/cancelTag',
						data: {
							tagsId: v.tags.tagsId
						}
					}).then(res => {
						let data = {}
						if (v.levelOneCommentId) {
							data = this.commentData.list.find((item) => item.levelOneCommentId === v.levelOneCommentId);
						} else {
							for (let k of this.commentData.list) {
								for (let kk of k.levelTwoComments) {
									if (kk.levelTwoCommentId == v.levelTwoCommentId) {
										data = kk
									}
								}
							}
						}
						data.tags.count = res
						data.tags.flag = 0
					})
				} else {
					this.$request.post({
						url: 'Tags/increaseThumb',
						data: {
							tagsId: v.tags.tagsId
						}
					}).then(res => {
						let data = {}
						if (v.levelOneCommentId) {
							data = this.commentData.list.find((item) => item.levelOneCommentId === v.levelOneCommentId);
						} else {
							for (let k of this.commentData.list) {
								for (let kk of k.levelTwoComments) {
									if (kk.levelTwoCommentId == v.levelTwoCommentId) {
										data = kk
									}
								}
							}
						}
						data.tags.count = res
						data.tags.flag = 1
					})
				}

			},
			// 评论
			commentSub() {
				this.$refs.commentTpl.openComment(1)
			}

		},
		onShareAppMessage:function (res){
			return {
				title: `${this.detailInfo.activitiesTopic} ${this.detailInfo.startTime}-${this.detailInfo.endTime}`,
				path:`pages/activity-detail/activity-detail?scene=${this.activeId}`,
				imageUrl:`${this.detailInfo.imgAddrs}`,//自定义图片的地址
			}
		},
		onShareTimeline() {
			return {
				title:`${this.detailInfo.activitiesTopic} ${this.detailInfo.startTime}-${this.detailInfo.endTime}`,
				path:`pages/activity-detail/activity-detail?scene=${this.activeId}`,
				imageUrl:`${this.detailInfo.imgAddrs}`,//自定义图片的地址
			}
		},
		onLoad(option) {
		    console.log('活动isLine',this.isLine)
			wx.showShareMenu({
					withShareTicket:true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus:["shareAppMessage","shareTimeline"]
			})
			this.activeId = option.scene;
			this.getDetail(option.scene);


			this.getComment()
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.model);
					if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) { //XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
						that.bottomHeight = '185rpx'
					} else {
						that.bottomHeight = '110rpx'
					}
				}
			});
		},
		onShow() {
			this.getCollectInfo();
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 70) {
				this.isShowTabbar = true
			}
			if (e.scrollTop < 70) {
				this.isShowTabbar = false
			}
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},
		onHide() {
			this.$refs.ActivityItem.resetOpcity()
		},
	}
</script>
<style scoped lang="scss">
	.button-bottom {
		width: 446upx!important;
		height: 82upx;
		background: #F6F6F6;
		border-radius: 6upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #BFBFBF;
		line-height: 80upx;
		padding-left: 38upx;
		margin-top: 4upx;
	}
	.page-content {
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		background-color: #eee;
		font-size: 14px;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 200px;
	}

	.tabbody {
		position: relative;
		width: 100%;
		/* border-bottom: 3px solid #4CD964; */
	}

	.pr-ty-cc {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
	}

	.project-detail-project-img {
		width: 100%;
		background-color: #FFFFFF;
		height: 471upx !important;
		/* border: 1px solid #007AFF; */
	}

	.project-detail-project-contain {
		background-color: #FFFFFF;
		padding: 30upx 30upx;
	}

	.project-detail-project-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(34, 34, 34, 1);
	}

	.project-detail-project-want {
		margin-top: 8upx;
		font-size: 34upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D50002;
	}

	.two-line {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.project-detail-project-wantdesc {
		margin-top: 26upx;
		border-radius: 12upx;
		/* height: 105upx; */
		padding: 14upx;
		background-color: #FBFBFB;
		font-size: 24upx;
		/* line-height: 1.4; */
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
	}

	.project-detail-project-condetail {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20upx;
	}

	.project-detail-project-condetail-item-over {
		width: 100%;
		padding-right: 10upx;
	}

	.project-detail-project-condetail-item {
		width: 50%;
		padding-right: 10upx;
		margin-bottom: 10upx;
	}

	.one-line {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.project-detail-project-condetail-item-title {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A9A9A9;
	}

	.project-detail-project-condetail-item-title-mon {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D50002;
	}

	.project-detail-project-condetail-item-title-con {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.project-detail-project-condetail-belong {
		background: rgba(255, 255, 255, 1);
		padding: 22upx 30upx;
	}

	.project-detail-project-condetail-belong-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-project-condetail-belong-com {
		margin-top: 15upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		border-bottom: 1upx solid #EBEBEB;
		padding-bottom: 28upx;
	}

	.project-detail-project-condetail-belong-com-no {
		margin-top: 15upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding-bottom: 28upx;
	}

	.project-detail-project-condetail-belong-loc {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-detail-contain {
		padding: 30upx;
		background-color: #FFFFFF;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.project-detail-detail-contain-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-detail-contain-detail {
		// margin-top: 42upx;
		white-space: pre-wrap;
		word-break: break-all;
	}

	.project-detail-comment {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 46upx;
	}

	.project-detail-comment-seen-more {
		margin: 0upx 30upx;
		text-align: center;
		line-height: 88upx;
		height: 88upx;
		background: rgba(248, 248, 248, 1);
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
	}

	.right-margin43 {
		margin-right: 43upx;
	}

	.left-margin43 {
		margin-left: 43upx;
	}

	.project-detail-recommend {
		background-color: #FFFFFF;
	}

	.project-detail-recommend-head {
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
		justify-content: center;
		height: 114upx;
	}

	.project-detail-recommend-head image {
		height: 50upx;
	}



	.project-detail-recommend-head-line {
		width: 239upx;
		height: 1upx;
		border-bottom: 1px solid #EBEBEB;
	}

	.project-detail-option {
		/* padding-top: 187upx; */
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.project-detail-option-contain {
		height: 50px;
		border-top: 1px solid #F2F2F2;
		padding: 10upx 30upx;
		display: flex;
	}

	.project-detail-option-contain .l {
		flex: 1;
		display: flex;
		margin-right: 20upx;
		justify-content: space-around;
		margin-top: 6upx;
	}

	.project-detail-option-sc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 80upx;
		width: 88upx;
	}
	
	.project-detail-option-sc button {
		border: none;
		background-color: #FFFFFF;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		width: 88upx;
	}
	.project-detail-option-sc button::after {
		border: none;
	}

	.project-detail-option-top {
		width: 36upx;
		height: 36upx;
		/* border: 1px solid #007AFF; */
	}

	.project-detail-option-text {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5F5F5F;
	}

	.project-detail-option-btn {
		display: flex;
		view {
			box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
		}
	}

	.project-detail-option-left-btn {
		width: 50%;
		background: linear-gradient(90deg, rgba(42, 203, 250, 1) 0%, rgba(42, 141, 250, 1) 100%);
		border-radius: 100upx 0px 0px 100upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.project-detail-option-right-btn {
		width: 50%;
		background: rgba(42, 125, 250, 1);
		border-radius: 0upx 100upx 100upx 0upx;
		line-height: 80upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.project-detail-recommend-head-title {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.self-divider {
		width: 100%;
		height: 16upx;
		background: rgba(245, 246, 249, 1);
	}

	.marginb10 {
		margin-bottom: 10upx;
	}

	.project-detail-option-text button {
		font-size: inherit;
		display: inline;
		padding: unset;
		line-height: inherit;
		background-color: #FFFFFF;
		color: #5F5F5F;
	}

	// .project-detail-option-text button image{
	// 	position: absolute;
	// 	top: 6upx;
	// 	left: 0;
	// }

	.project-detail-option-text button::after {
		border: none;
	}

	.project-detail-option-btn {
		width: 386rpx;
		height: 82rpx;
	}

	.project-detail-option-btn-1 {
		width: 386rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(243, 247, 255, 1);
		border-radius: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2A7DFA;
	}

	.project-detail-option-btn-2 {
		width: 386rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, rgba(85, 165, 253, 1) 0%, rgba(42, 125, 250, 1) 100%);
		border-radius: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.project-detail-option-btn-3 {
		width: 386rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(155, 155, 155, 1);
		border-radius: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
</style>
